<template>
	<view class="container">
		<view class="menu">
			<view :class="{'active': currentMenu === 'myPosts'}" @click="currentMenu = 'myPosts'">我的发布</view>
			<view :class="{'active': currentMenu === 'postNeed'}" @click="currentMenu = 'postNeed'">发布家教</view>
		</view>

		<view v-if="currentMenu === 'myPosts'" class="need-list">
			<view v-for="(need, index) in needs" :key="index" class="need-item">
				<view class="item-details">
					<text>课程名称: {{ need.course }}</text>
					<text>学历背景: {{ need.background }}</text>
					<text>性别: {{ need.sex }}</text>
					<text>薪资: {{ need.salary }}</text>
					<text>时间: {{ need.duration_begin }} - {{ need.duration_end }}</text>
					<text>内容: {{ need.content }}</text>
				</view>
				<button @click="deleteNeed(need.id)" class="delete-button">删除</button>
			</view>
		</view>

		<view v-if="currentMenu === 'postNeed'" class="form-container">
			<uni-forms ref="formRef" :modelValue="form" :rules="rules" label-width="140rpx" label-align="left">
				<!-- 课程名称 -->
				<uni-forms-item label="课程名称" name="course">
					<uni-easyinput v-model="form.course" placeholder="请输入课程名称"></uni-easyinput>
				</uni-forms-item>

				<!-- 学历背景 -->
				<uni-forms-item label="学历背景" name="background">
					<uni-easyinput v-model="form.background" placeholder="请输入学历背景"></uni-easyinput>
				</uni-forms-item>

				<!-- 性别 -->
				<uni-forms-item label="性别" name="sex">
					<uni-data-checkbox v-model="form.sex" :localdata="range"></uni-data-checkbox>
				</uni-forms-item>

				<!-- 薪资 -->
				<uni-forms-item label="薪资" name="salary">
					<uni-easyinput v-model="form.salary" placeholder="请输入薪资" type="number"></uni-easyinput>
				</uni-forms-item>

				<!-- 开始时间 -->
				<picker mode="date" @change="handleBeginDateChange" start="2023-01-01" end="2025-12-31">
				  <view class="input-field">开始时间: {{ form.duration_begin }}</view>
				</picker>
				<picker mode="date" @change="handleEndDateChange" start="2023-01-01" end="2025-12-31">
				  <view class="input-field">结束时间: {{ form.duration_end }}</view>
				</picker>
				<!-- 内容 -->
				<uni-forms-item label="内容" name="content">
					<textarea v-model="form.content" placeholder="请输入具体需求" style="height: 120rpx;"></textarea>
				</uni-forms-item>

				<view class="form-item">
					<button type="primary" @click="submitForm">发布</button>
				</view>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentMenu: 'myPosts', // 控制当前显示的菜单项，默认显示"我的发布"
				needs: [], // 家教需求列表
				user: uni.getStorageSync('xm-user'),
				form: {
					account:'',
					course: '',
					background: '',
					sex: '男',
					salary: '',
					duration_begin: '',
					duration_end: '',
					content: ''
				},
				rules: {
					course: {
						rules: [{ required: true, errorMessage: "课程名称不能为空" }]
					},
					background: {
						rules: [{ required: true, errorMessage: "学历背景不能为空" }]
					},
					salary: {
						rules: [{ required: true, errorMessage: "薪资不能为空" }]
					},
					duration_begin: {
						rules: [{ required: true, errorMessage: "请选择开始时间" }]
					},
					duration_end: {
						rules: [{ required: true, errorMessage: "请选择结束时间" }]
					}
				},
				range: [
					{ text: '男', value: '男' },
					{ text: '女', value: '女' }
				]
			};
		},
		methods: {
			// 提交表单，发布家教需求
			submitForm() {
				this.$refs.formRef.validate((valid) => {
						this.form.account = this.user.account;
						this.$request.post('/need/insert', this.form).then(res => {
							if (res.code === '200') {
								uni.showToast({
									icon: "success",
									title: "发布成功"
								});
								this.resetForm();
								this.fetchNeeds(); // 重新获取家教需求列表
							} else {
								uni.showToast({
									icon: "error",
									title: res.msg
								});
							}
						});
					
				});
			},
			// 重置表单
			handleBeginDateChange(event) {
			  this.form.duration_begin = event.target.value; // 获取开始日期
			},
			handleEndDateChange(event) {
			  this.form.duration_end = event.target.value; // 获取结束日期
			},
			resetForm() {
				this.form = {
					course: '',
					background: '',
					sex: '男',
					salary: '',
					duration_begin: '',
					duration_end: '',
					content: ''
				};
			},
			// 获取家长的家教需求列表
			fetchNeeds() {
				this.$request.get(`/need/selectByAccount?account=${this.user.account}`).then(res => {
					if (res.code === '200') {
						this.needs = res.data;
					}
				});
			},
			// 删除家教需求
			deleteNeed(id) {
				uni.showModal({
					title: "确认删除",
					content: "确定要删除这个家教需求吗？",
					success: (res) => {
						if (res.confirm) {
							this.$request.del(`/need/delete/${id}`).then(response => {
								if (response.code === '200') {
									uni.showToast({
										icon: "success",
										title: "删除成功"
									});
									this.fetchNeeds(); // 重新获取家教需求列表
								}
							});
						}
					}
				});
			}
		},
		mounted() {
			this.fetchNeeds(); // 页面加载时获取需求列表
		}
	}
</script>

<style>
.container {
	padding: 20rpx;
}

.menu {
	display: flex;
	justify-content: space-around;
	border-bottom: 1px solid #ccc;
	margin-bottom: 20rpx;
}

.menu view {
	flex: 1;
	text-align: center;
	padding: 20rpx 0;
	cursor: pointer;
}

.menu view.active {
	color: #007aff;
	border-bottom: 2px solid #007aff;
}

.need-list {
	padding: 20rpx;
}

.need-item {
	border: 1px solid #ccc;
	padding: 10rpx;
	margin: 10rpx 0;
}

.item-details text {
	display: block;
	margin: 5rpx 0;
}

.delete-button {
	background-color: #ff4d4f;
	color: white;
	padding: 10rpx;
	border-radius: 5rpx;
	margin-top: 10rpx;
}

.form-container {
	padding: 20rpx;
}

.form-item {
	margin-bottom: 20rpx;
}

.form-item text {
	margin-bottom: 5rpx;
	display: block;
}

.form-item input,
.form-item textarea {
	width: 100%;
	border: 1px solid #ccc;
	padding: 10rpx;
	border-radius: 5rpx;
}
.input-field {
  border: 1px solid #ccc; /* 与其他输入框一致的边框 */
  padding: 10rpx; /* 增加与输入框相同的内边距 */
  border-radius: 5rpx; /* 圆角与输入框保持一致 */
  font-size: 30rpx; /* 字体大小 */
  margin-bottom: 40rpx; /* 增加底部间距 */
  background-color: #f9f9f9; /* 添加背景色以匹配输入框风格 */
}

</style>
